<template>
  <view class="billIndex">
    <view class="billingTop">
      <view class="timeSelect">
        <view class="uni-list-cell-db">
          <picker mode="date" :value="start_date" :end="start_date"  @change="beginDateChange">
            <view class="date">{{billFrom.beginDate || '开始时间'}}</view>
          </picker>
        </view>
        <view class="middleTo">至</view>
        <view class="uni-list-cell-db">
          <picker mode="date" :value="start_date" :start="billFrom.beginDate" :end="start_date" @change="endDateChange">
            <view class="date">{{billFrom.endDate || '结束时间'}}</view>
          </picker>
        </view>
      </view>
      <view class="detailMoney">
        <view class="incomeMoney">收入: {{billData.income + '' || '-'}}</view>
        <view class="expendMoney">支出: {{billData.pay  + '' || '-'}}</view>
      </view>
    </view>
    <view class="billList">
      <view class="billItme"  v-for="(item,index) in billList" :key = "index">
        <view class="billItmeL">
          <view class="billItmeL-t">
            {{item.remark}}
            <!-- <text class="billStatus-blue">--  审核中</text> -->
          </view>
          <view class="billItmeL-b">{{item.createdAt}}</view>
        </view>
        <view class="billItmeR">
          <view class="billItmeR-t expendM" v-if="item.inOrOut  == 1">
            -{{item.transAmount}}
          </view>
          <view class="billItmeR-t incomeM" v-else>
            +{{item.transAmount}}
          </view>
          <view class="billItmeR-b">
            余额：{{item.afterAmount}}
          </view>
        </view>
      </view>
      <view class="vacancy" v-if="billList && billList.length == 0">
        <view class="loadingImg">
          <image style="width: 340rpx; height: 340rpx;" :src="image" mode=""></image>
        </view>
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
import { accountDetails } from "@/service/billingDetail/billingDetail.service.js"
export default {
  data () {
    const currentDate = this.getDate({
      format: true
    })
    return {
      billFrom: {
        beginDate:'',
        endDate:'',
        size:10,
        current:1,
        total:0
      },
      billList: [],
      billData: {
        income: '',
        pay: ''
      },
      start_date: currentDate,
      end_date: currentDate,
      image: this.$store.state.imgBaseUrl + '/notShop.png',
    }
  },
  onLoad (option) {
    let beginDate = option.beginDate;
    let endDate = option.endDate;
    this.getNowMonthDate(beginDate,endDate); // 获取当月
  },
  onShow () {
  },
  onReachBottom () {
    // 页面滚动到底部的事件
    if (this.billFrom.current == 1) {
      return false;
    } else if (this.billFrom.total > this.billList.length) {
      this.getBillDetail();
    }else if (this.billFrom.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  methods: {
    getBillDetail () {
      uni.showLoading();
      let params = {
        beginDate: this.billFrom.beginDate,
        endDate: this.billFrom.endDate,
        size: this.billFrom.size,
        current: this.billFrom.current
      };
      accountDetails(params,res => {
        if(res.status == 0) {
          if (this.billFrom.current == 1) {
            this.billList = res.data.list.records;
          } else {
            this.billList = this.billList.concat(res.data.list.records);
          }
          this.billFrom.total = res.data.list.total;
          this.billData.income = res.data.income;
          this.billData.pay = res.data.pay;
          if (this.billFrom.total > this.billList.length) {
            this.billFrom.current ++;
          }
        }
        uni.hideLoading();
      });
    },
    
    //获取本月
    getNowMonthDate(beginDate,endDate) {
      let date = new Date();
      let year = date.getFullYear() + "";
      let month = (date.getMonth() + 1) + "";
      // // 本月第一天日期
      let begin = year + "-" + month + "-01";
      // // 本月最后一天日期    
      // let lastDateOfCurrentMonth = new Date(year,month,0);
      // let end = year + "-" + month + "-" + lastDateOfCurrentMonth.getDate();
      if (beginDate && endDate) {
        this.billFrom.beginDate = beginDate;
        this.billFrom.endDate = endDate;
      } else {
        this.billFrom.beginDate = begin;
        this.billFrom.endDate = this.start_date;
      }
      this.getBillDetail();
    },
    // 选择日期
    beginDateChange (e) {
      this.billFrom.beginDate = e.target.value;
      this.getBillDetail()
    },
    endDateChange (e) {
      this.billFrom.current = 1;
      this.billFrom.endDate = e.target.value;
      this.getBillDetail()
    },
    // 获取当前时间
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
    
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="scss" scoped>
  .billIndex {
    .vacancy {
      margin-top: 30rpx;
      text-align: center;
      font-size: 24rpx;
      color: #999;
      .loadingImg {
        padding-top: 200rpx;
      }
    }
    .billingTop {
      padding: 36rpx 0 23rpx 50rpx;
      .timeSelect {
        font-size:28rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
        .uni-list-cell-db {
          display: inline-block;
        }
        .middleTo {
          display: inline-block;
          margin: 0 30rpx;
        }
      }
      .detailMoney {
        font-size:24rpx;
        font-weight:500;
        margin-top: 23rpx;
        color:rgba(153,153,153,1);
        .expendMoney {
          display: inline-block;
          margin-left: 28rpx;
        }
        .incomeMoney {
          display: inline-block;
        }
      }
    }
    .billList {
      min-height: calc(100vh - 78px);
      background-color: #FFFFFF;
      .billItme {
        display: flex;
        justify-content: space-between;
        padding: 34rpx 33rpx 17rpx 0;
        border-bottom: 1px solid rgba(225,225,225,1);
        margin-left: 34rpx;
        line-height: 46rpx;
        .billItmeL {
          .billItmeL-t {
            font-size:28rpx;
            font-weight:500;
            color:rgba(51,51,51,1);
            .billStatus-blue {
              color: #1F8EDD;
              margin-left: 10rpx;
              font-size: 24rpx;
            }
          }
          .billItmeL-b {
            font-size:24rpx;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
        .billItmeR {
          text-align: end;
          .billItmeR-t {
            font-size:32rpx;
            font-weight:bold;
            color:rgba(51,51,51,1);
          }
          .expendM {
            color: #333333;
          }
          .incomeM {
            color: #C2AC78;
          }
          .billItmeR-b {
            font-size:24rpx;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
      }
    }
  }
</style>
